<template>
	<view>
		<cu-custom bgColor="bg-orange-red" :isBack="true"><block slot="backText"></block><block slot="content">特卖品牌</block></cu-custom>
		<view class="serve flex justify-between">
			<view class="listbox haohuo flex">
				<view class="img"><image src="/static/brand/zs.png" mode=""></image></view>
				<view class="txt">优选好货</view>
			</view>
			<view class="listbox free flex">
				<view class="img"><image src="/static/brand/car.png" mode=""></image></view>
				<view class="txt">全场包邮</view>
			</view>
			<view class="listbox zheng flex">
				<view class="img"><image src="/static/brand/zheng.png" mode=""></image></view>
				<view class="txt">正品保证</view>
			</view>						
		</view>
		<view class="orgredbg">
			<view class="brandArea">
				<view class="info flex">
					<view class="flex">
						<view class="logo"><image :src="detail.brandLogo" mode="widthFix"></image></view>
						<view class="logtxt">{{detail.brandName}}</view>
					</view>					
					<!-- <view class="share">分享会场</view> -->
				</view>
				<view class="timeArea flex justify-between">
					<view class="num">共{{count}}件单品</view>
					<block v-if="isbuy">
						<view class="txt">距离结束 {{endtime.day}}天</view>
						 <uni-countdown textColor="#fff" color="#fff"  backgroundColor="#333"
							:hour="endtime.hour" :minute="endtime.min" :second="endtime.sec"></uni-countdown>
						</block>
						<block v-else>
						<view class="txt">已结束</view>	
					</block>
				</view>
			</view>
		</view>		
		<view class="prolist flex justify-between">			
			<view class="lists" v-for="(item,index) in lists" :key="index"  @click="goodsdetail(item.product_id,item.stock)">
				<view class="proimg">
					<view class="img"><image :src="item.image?item.image:'/static/images/empty.png'"></image></view>
					<view class="endbuy" v-if="item.stock==0 || !isbuy">
						<image src="/static/images/nobuy.png" mode=""></image>
					</view>
				</view>
				<view class="info">
					<view class="title">{{item.store_name}}</view>
					<view class="desc flex justify-between">
						<view class="left">已销售 {{item.ficti}} 件</view>
						<view class="right red" v-if="item.lirun">赚&yen;{{item.lirun}}</view>
					</view>
				</view>
				<view class="price">
					<view class="shop fl flex">
						<view class="num">&yen;{{item.price}}</view>
					</view>
<!-- 					<view class="sharezhuan fr" v-if="item.shareZhuan>0">						
						<text class="profit">赚&yen;{{item.shareZhuan}}</text>
					</view>	 -->									
					<view class="del fr" >&yen;{{item.ot_price}}</view>

				</view>
			</view>				
		</view>	
		<view class="foottxt">
			<block v-if="!emptytxt">
				<view class="cu-load loading"></view>
			</block>
			<block v-else>
				{{emptytxt}}
			</block>
		</view>		
	</view>
</template>
<script>
	import cuCustom from '@/static/colorui/components/cu-custom.vue'
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			cuCustom,uniCountdown,uniLoadMore
		},		
		data() {
			return {
				lists:[],
				page:0,
				id:'',
				isend:false,
				detail:[],
				endtime:[],
				isbuy:true,
				count:0,
				loadStatus: 'more',
				store:'',
				emptytxt:''
			};
		},
		methods: {
			getdata(){
				this.loadStatus = 'loading';
				this.$api.getVenueDetail({
					'venue_id':this.id,
					'page':this.page
				},res=>{					
					if(res.status==200){
						this.detail = res.data.detail;
						if( res.data.list.length>0) {
							if (res.data.list.length >= 10) {
								this.loadStatus = 'more';
								this.page++;
							} else {
								this.loadStatus = 'noMore';
								this.emptytxt = "-- 我也是有底线的 --";
							}
							let _list = res.data.list;	
							this.lists = [...this.lists, ..._list];
						} else {
							this.loadStatus = 'noMore';
							this.emptytxt = "-- 我也是有底线的 --";
						}
						this.endtime = res.data.detail.endtime;
						this.count  = res.data.count;
						this.isend = false;
						if(res.data.detail.finish==1){
							this.isbuy = false;
						}
					} else {
						this.loadStatus = 'noMore';
						this.emptytxt = "-- 我也是有底线的 --";
					}
				});
			},		
			goodsdetail(id,stock=0) {
				if(!id){
					this.$common.errorToShow("非法请求");
					return;
				}
				if(stock<=0){
					this.$common.errorToShow("已售罄");
					return;					
				}
				if(!this.isbuy){
					this.$common.errorToShow("当前活动已结束");
					return;					
				}
				let url = "/pages/goods_details/index?id="+id;
				this.$common.navigateTo(url);	
			}			
		},
		onReachBottom() {
			if (this.loadStatus === 'more') {
				this.getdata();
			}
		},			
		onLoad(option) {
			if(!option.id){
				this.$common.errorToShow("非法请求");
				return;
			}
			if( option.store) {
				this.store =  option.store;
			}	
			if( option.wbinvite ) {
				this.$db.set("invitecode",option.wbinvite);
			}						
			this.id = option.id;
			this.getdata(option.id);
		}		
	}
</script>

<style lang="less">
	page {
		background-color: #F5F5F5;
	}
	image {
		width: 100%;
		height: 100%;
	}
	.serve {
		background:linear-gradient(90deg,rgba(229,101,69,1),rgba(199,25,18,1));
		padding: 10upx 20upx 20upx 80upx;	
		.listbox {
			width: 200upx;
			height: 26upx;
			color: #fff;
			font-size:24upx;
			.img {
				width: 35upx;
				height: 35upx;	
				flex-shrink: 1;
				margin-right: 10upx;
			}					
		}
	}
	.red {
		color: #fa4d44;
	}
	.orgredbg {
		background:linear-gradient(90deg,rgba(229,101,69,1),rgba(199,25,18,1));
		padding: 60upx 0;
		position: relative;
		.brandArea {
			width:710upx;
			height:220upx;
			background:rgba(255,255,255,1);
			border-radius:20upx;
			position: absolute;
			left: 25upx;
			top:20upx;
			padding: 30upx;
			.info {
				width: 100%;
				align-items: center;
				.logo {
					display: flex;
					align-items: center;
					width:90upx;
					height:90upx;
					// background-color: #eee;
					// border-radius:50%;
					overflow: hidden;
				}
				.logtxt {	
					font-size:36upx;
					font-weight:bold;
					color:rgba(35,35,35,1);	
					line-height: 90upx;
					height: 90upx;
					padding-left: 10upx;
					overflow: hidden;
				}	

				.share {
					margin-left: auto;
					width:140upx;
					height:56upx;
					background:rgba(250,77,68,1);
					border-radius:28upx;
					font-weight:500;
					color:rgba(255,255,255,1);	
					line-height: 56upx;
					text-align: center;
					font-size: 24upx;
				}
			}
			.timeArea {
				 line-height: 55upx;
				 margin-top: 20upx;
				 .txt {
					 margin-right: 10upx;
					 margin-left: auto;
				 }
				 .num {
					 color: #9A9A9A;
					 font-size: 28upx;
				 }
			}
		}
	}

	.prolist {
		margin-top: 120upx;
		flex-wrap: wrap;
		padding: 0 20upx;
		.lists {
			width:346upx;
			background:rgba(255,255,255,1);
			border-radius:20upx;
			overflow: hidden;
			margin-top: 20upx;
			padding-bottom: 20upx;
			.proimg {
				position: relative;
				.img {
					width:350upx;
					height:350upx;
				}
				.endbuy {
					position: absolute;
					top: 20%;
					left: 30%;
					width:150upx;
					height:150upx;			
					transform: rotate(-30deg);
				}				
			}
			.info {
				padding:0 20upx;
				width: 346upx;
				display: flex;
				flex-direction: column;
				.title {
					color: #333;
					line-height: 41upx;
					height: 90upx;
					padding-top: 15upx;
					overflow: hidden;
				}
				.desc {
					color:rgba(167,167,167,1);
					font-size: 24upx;
					margin:  10upx 0;
					height: 46upx;
					line-height: 46upx;
					overflow: hidden;
				}
			}
			.price{
				padding: 5upx 30upx 20upx;
				.del {
					font-weight:500;
					text-decoration:line-through;
					color:#333;	
					margin-top: 10upx;
					font-size:26upx;
					margin-left: 10upx;
				}
				.shop {
					.txt {
						font-size:22upx;
						font-weight:500;
						color:#333;		
						margin-top: 10upx;
						margin-right: 7upx;
					}
					.num {
						font-size:32upx;
						font-weight:bold;
						color:rgba(250,77,68,1);							
					}
				}
			}			
		}		
	}

	.foottxt {
		text-align: center;
		padding: 20upx 0;
	}
	
	.sharezhuan {
		display: inline-block;
		padding: 0 20upx;
		position: relative;
		background: linear-gradient(to right,#ff6215,#ff2f4b);
		border-radius: 20upx;
		.profit {
			color: #fff;
			font-size: 24upx;
			height: 34upx;
			line-height: 34upx;			
		}
	}
</style>
